<template>
  <el-container>
    <el-aside :width="systemStore.collapse ? '64px' : '200px'">
      <my-menu></my-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-icon :size="20" @click="systemStore.changeCollapse"><el-icon-expand v-if="systemStore.collapse" /><el-icon-fold v-else /></el-icon>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            admin
            <el-icon class="el-icon--right">
              <el-icon-arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <my-breadcrumb></my-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import myMenu from '@/components/my-menu/index.vue';
import myBreadcrumb from '@/components/my-breadcrumb/index.vue';
import { useSystemStore } from '@/stores/index';
import { useRouter } from 'vue-router';
import { removeToken } from '@/utils/token';
const router = useRouter();

const systemStore = useSystemStore();
const handleCommand = (command: string | number | object) => {
  if (command == 'logout') {
    removeToken();
    router.push('/login');
  }
};
</script>

<style lang="scss">
.el-container {
  height: 100vh;

  .el-aside {
    background-color: #545c64;
    transition: width 0.1s;
  }

  .el-header {
    border-bottom: 1px solid #545c64;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-dropdown-link {
      outline: none;
    }
  }
}
</style>
